<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>5.6.2.绑定style样式</title>
</head>
<body>
    <div id="app">
        <!--数组语法-->
        <div v-bind:style="[baseStyles,overridingStyles]"></div>
        <!--对象语法写法一-->
        <!--CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名-->
        <div v-bind:style="{width:setWidth,height:setHeight,border:setBorder,'background-color':setBc}"></div>
        <!--对象语法写法二：直接绑定样式对象-->
        <div v-bind:style="styleObject"></div>

        <!--v-bind:class可以简写为:class-->
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                baseStyles:{"background-color":"lavender","width":"200px","height":"200px"},
                overridingStyles:{border:"1px solid black"},
                // 对象语法写法一
                setWidth:'200px',
                setHeight:'200px',
                setBorder:'1px solid black',
                setBc:'pink',
                // 对象语法写法二
                styleObject:{
                    width:"200px",
                    height:"200px",
                    border:"1px solid black",
                    'background-color':"#e5efe9"
                }
            }
        });
    </script>
</body>
</html>